<section fxFlex="50" fxLayout="column">
  <div class="toolbar">
    <input [formControl]="silkCarQCtrl" [matAutocomplete]="autoSilkCar" [placeholder]="'Tooltip.q'|translate" autofocus class="mySearch">
    <mat-autocomplete #autoSilkCar="matAutocomplete" (optionSelected)="onSilkCarSelected($event)" autoActiveFirstOption>
      <mat-option *ngFor="let it of autoCompleteSilkCars$|async" [value]="it.code">
        {{it.code}}
      </mat-option>
    </mat-autocomplete>
  </div>

  <mat-divider></mat-divider>

  <app-silk-car-record-info *ngIf="(silkCarRuntime$|async)?.silkCarRecord" @insertRemove [silkCarRuntime]="silkCarRuntime$|async" fxFlex></app-silk-car-record-info>
</section>

<mat-divider vertical></mat-divider>

<section *ngIf="(silkCarRuntime$|async)?.silkCarRecord" @insertRemove fxFlex="50" fxLayout="column">
  <div [formGroup]="settingForm" class="toolbar">
    <h4 fxFlex></h4>

    <button (click)="settingForm.patchValue({showAll:!settingForm.value.showAll})" mat-icon-button type="button">
      <mat-icon>{{settingForm.value.showAll ? 'visibility' : 'visibility_off'}}</mat-icon>
    </button>
    <mat-button-toggle-group appearance="legacy" formControlName="sort" style="box-shadow: none;">
      <mat-button-toggle value="desc">{{'Common.timeDesc'|translate}}</mat-button-toggle>
      <mat-button-toggle value="asc">{{'Common.timeAsc'|translate}}</mat-button-toggle>
    </mat-button-toggle-group>
  </div>

  <mat-divider></mat-divider>

  <app-flow-card [setting]="settingForm.value" [silkCarRuntime]="silkCarRuntime$|async" fxFlex></app-flow-card>
</section>
